<div class="modal-header">
  <h3>新建区域</h3>
  <button type="button" class="close" (click)="cancel()"></button>
</div>
<form [class.submitted]="ngForm.submitted">
  <div class="modal-body">
    <div class="form-group required">
      <label for="zone-parent">父区域</label>
      <select
        name="parent_level_struct"
        id="zone-parent"
        class="form-control level-{{ ngForm.value.parent_level_struct?.length / 3 }}"
        ngModel
        required
      >
        <option value="" hidden>选择父区域</option>
        <!-- 递归遍历 -->
        <ng-template #optionRef let-tree="tree">
          <ng-container *ngFor="let zone of tree">
            <option [value]="zone.level_struct || '/'">
              <ng-container *ngFor="let _ of zone.level_struct.length | range">
                &nbsp;
              </ng-container>
              {{ zone.name }}
            </option>
            <ng-container *ngTemplateOutlet="optionRef; context: { tree: zone.children }"></ng-container>
          </ng-container>
        </ng-template>
        <ng-container *ngTemplateOutlet="optionRef; context: { tree: value }"></ng-container>
      </select>
    </div>
    <div class="form-group required">
      <label for="zone-name">区域名称</label>
      <div>
        <input
          id="zone-name"
          name="name"
          type="text"
          class="form-control"
          maxlength="15"
          autofocus="zone-name"
          ngModel
          required
        />
      </div>
    </div>
    <div class="form-group">
      <label for="zone-desc">区域描述</label>
      <div>
        <input id="zone-desc" name="des" type="text" maxlength="60" class="form-control" ngModel />
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="cancel()">
      取消
    </button>
    <button class="btn btn-primary" (click)="create()">创建</button>
  </div>
</form>
